import React from 'react';
import {render} from 'react-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

class TodoList extends React.Component{
	render(){
		var item=this.props.list.map((item,index)=>{
				return <li key={index}>{item}</li>
			})
		return (
			<ul>
				<ReactCSSTransitionGroup
					transitionName="sb"
					transitionEnterTimeout={500}
					transitionLeaveTimeout={300}
				>
					{item}
				</ReactCSSTransitionGroup>				
			</ul>
		)
	}
}

class TodoApp extends React.Component{
	constructor(props){
		super(props);
		this.state={
			todoList:['11','22']
		}
		this.addTodo=this.addTodo.bind(this);
	}

	addTodo(){
		var content=this.refs.textContent.value;
		var data=this.state.todoList;
		data.push(content);

		this.setState({
			todoList:data
		})
	}

	render(){
		return(
			<div>
				<h1>邱神</h1>
				<input type="text" ref="textContent"/>
				<button onClick={this.addTodo}>菜鸡</button>
				<TodoList list={this.state.todoList} />
			</div>
		)
	}
}

render(
	<TodoApp />,
	document.querySelector('#box')
)